<script setup lang='ts'>
const detail = defineModel<any>('detail', { required: true, default: {} })
const visible = defineModel<any>('visible', { required: true, default: false })
function dateFormat(value) {
    if (value) {
        return value.substr(0, 10)
    }
    else {
        return ''
    }
}
</script>

<template>
    <div class="dialog">
        <el-dialog v-model="visible"
                   title="详情"
                   width="810"
        >
            <!-- 基本信息 -->
            <div class="item">
                <div class="title">
                    基本信息
                </div>

                <div class="line">
                    <span class="line_title"
                          style="width: 46px;"
                    >楼栋：</span>

                    <span style="flex: 1;">
                        {{ detail.building }}
                    </span>
                </div>

                <div class="line">
                    <span class="line_title">单元：</span>

                    <span>{{ detail.unit }}</span>
                </div>

                <div class="line">
                    <span class="line_title">电梯状态：</span>
                    <!-- 1已加装-绿色、2已上报-黄色、3加装中-蓝色、4全部-红色 -->
                    <el-tag v-if="detail.status === '1'"
                            type="success"
                    >
                        已加装
                    </el-tag>

                    <el-tag v-else-if="detail.status === '2'"
                            type="warning"
                    >
                        已上报
                    </el-tag>

                    <el-tag v-else-if="detail.status === '3'"
                            type="danger"
                    >
                        加装中
                    </el-tag>

                    <el-tag v-else-if="detail.status === '4'"
                            type="primary"
                    >
                        全部楼栋
                    </el-tag>
                </div>

                <div class="line">
                    <span class="line_title">需求上报时间：</span>

                    <span>{{ detail?.submitTime || '' }}</span>
                </div>

                <div class="line">
                    <span class="line_title">上报需求人数：</span>

                    <span>{{ detail?.submitCount || '' }}</span>
                </div>
            </div>

            <div v-if="detail.statusHis !== '90' && detail.status !== '2'"
                 class="item"
                 style="height:90px;"
            >
                <div class="title">
                    业主意见征询
                </div>

                <div class="line">
                    <span class="line_title">完成业主意见征询时间：</span>

                    <span>{{ dateFormat(detail.yjDate) }}</span>
                </div>
            </div>

            <!-- 2 -->
            <div v-if="detail.statusHis !== '90' && detail.status !== '2'"
                 class="item"
                 style="height:114px;"
            >
                <div class="title">
                    可行性分析
                </div>

                <div class="line">
                    <span class="line_title">可行性分析结果：</span>

                    <span>{{ detail.analysisResult }}</span>
                </div>

                <div class="line">
                    <span class="line_title">取得可行性分析意见告知书时间：</span>

                    <span>{{ dateFormat(detail.analysisDate) }}</span>
                </div>
            </div>

            <!-- 3 -->
            <div v-if="detail.statusHis !== '90' && detail.status !== '2'"
                 class="item"
                 style="height:180px;"
            >
                <div class="title">
                    联合审查
                </div>

                <div class="line">
                    <span class="line_title">联合审查意见：</span>

                    <span>{{ detail.unionResult }}</span>
                </div>

                <div class="line">
                    <span class="line_title">取得联合审查批准意见书时间：</span>

                    <span>{{ dateFormat(detail.unionDate) }}</span>
                </div>

                <div class="line">
                    <span class="line_title">加装电梯工程预算：</span>

                    <span v-if="detail.budget">{{ detail.budget }}万元</span>
                </div>

                <div class="line">
                    <span class="line_title">是否委托国有代办平台：</span>

                    <span>{{ detail.agentFlag }}</span>
                </div>

                <div class="line">
                    <span class="line_title">是否平层入户：</span>

                    <span>{{ detail.entranceFlag === '1' ? '是': '否' }}</span>
                </div>
            </div>

            <!-- 4 -->
            <div v-if="detail.status === '1'"
                 class="item"
                 style="height:190px;"
            >
                <div class="title">
                    电梯使用登记
                </div>

                <div class="line">
                    <span class="line_title">取得电梯使用登记时间：</span>

                    <span>{{ dateFormat(detail.useDate) }}</span>
                </div>

                <div class="line">
                    <span class="line_title">电梯设备代码：</span>

                    <span>{{ detail.elevatorCode }}</span>
                </div>

                <div class="line">
                    <span class="line_title">电梯品牌：</span>

                    <span>{{ detail.brand }}</span>
                </div>

                <div class="line">
                    <span class="line_title">电梯使用单位：</span>

                    <span>{{ detail.useCompany }}</span>
                </div>

                <div class="line">
                    <span class="line_title">电梯维保单位：</span>

                    <span>{{ detail.repairCompany }}</span>
                </div>
            </div>

            <!-- 5 -->
            <div v-if="detail.status === '1'"
                 class="item"
                 style="height:90px;margin-right:0;"
            >
                <div class="title">
                    竣工验收登记
                </div>

                <div class="line">
                    <span class="line_title">取得电梯竣工意见验收表时间：</span>

                    <span>{{ dateFormat(detail.finishDate) }}</span>
                </div>
            </div>

            <!-- 6 -->
            <div v-if="detail.status === '1'"
                 class="item"
                 style="height:90px;margin-right:0;"
            >
                <div class="title">
                    档案归档
                </div>

                <div class="line">
                    <span class="line_title">取得档案归档证明资料时间：</span>

                    <span>{{ dateFormat(detail.archiveDate) }}</span>
                </div>
            </div>

            <!-- 7 -->
            <div v-if="detail.status === '1'"
                 class="item"
                 style="height:90px;margin-right:0;"
            >
                <div class="title">
                    补贴申领
                </div>

                <div class="line">
                    <span class="line_title">申领补贴时间：</span>

                    <span>{{ dateFormat(detail.slDate) }}</span>
                </div>
            </div>

            <!-- 8 -->
            <div v-if="detail.status === '1'"
                 class="item"
                 style="height:90px;margin-right:0;"
            >
                <div class="title">
                    补贴到账
                </div>

                <div class="line">
                    <span class="line_title">补贴到账时间：</span>

                    <span>{{ dateFormat(detail.receiveDate) }}</span>
                </div>
            </div>

            <template #footer>
                <div class="dialog-footer">
                    <ElButton @click="visible = false">
                        取消
                    </ElButton>

                    <ElButton type="primary"
                              @click="visible = false"
                    >
                        确认
                    </ElButton>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<style lang="scss" scoped>
.dialog :deep(.el-dialog__body) {
    height: 500px !important;
    overflow: auto;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}
.item {
    color: #1d2129;
    width: 360px;
    padding: 12px;
    box-sizing: border-box;
    border-radius: 3px;
    border: 1px solid #e5e6eb;
    margin: 0 18px 18px 0;
    .title {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 10px;
    }
    .line {
        line-height: 26px;
        display: flex;
        .line_title {
            color: #86909c;
        }
        :deep(.el-tag.el-tag--danger) {
            --el-tag-text-color: #0052d9;
            border-color: rgba(217, 236, 255);
            background-color: rgba(236, 245, 255);
        }
    }
}
</style>
